<script setup>
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'

const successOrdersVisible = defineModel('visible', {
  default: false,
  type: Boolean,
  required: true,
})
const router = useRouter()
const { t } = useI18n()

function handleGoToOrder() {
  router.push('/user/order')
}
</script>

<template>
  <n-modal
    v-model:show="successOrdersVisible"
    title=""
    :closable="false"
    :footer="null"
  >
    <n-card class="w-[17%]">
      <div class="success-img flex flex-col items-center justify-center">
        <img src="@/assets/img/itemsCart.png" alt="success" class="max-w-[300px]">
        <div class="mt-5 text-center text-xl font-bold">
          {{ t('message.orderSuccess') }}
        </div>
      </div>
      <div class="success-btn mt-5 space-y-2">
        <n-button type="primary" size="large" block @click="handleGoToOrder">
          {{ t('viewOrder') }}
        </n-button>
        <n-button block @click="successOrdersVisible = false">
          {{ t('continueShopping') }}
        </n-button>
      </div>
    </n-card>
  </n-modal>
</template>

<style scoped>

</style>
